<template>
    <div class="main-border">
      <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">待审核商品</el-menu-item>
        <el-menu-item index="2">已审核商品</el-menu-item>
      </el-menu>
  
      <!-- 待审核商品表格 -->
      <el-table 
        v-if="mode == 1"
        :data="pendingGoods"
        stripe
        style="width: 100%; color: #5a5c61;"
        v-loading="loading"
      >
        <el-table-column
          prop="releaseTime"
          label="申请时间"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="idleName"
          label="商品名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        label="商品分类"
        width="120"
        >
        <template slot-scope="scope">
            <!-- 添加分类名称转换 -->
            <el-tag type="">
            {{ getCategoryName(scope.row.idleLabelDetails) || '未分类' }}
            </el-tag>
        </template>
        </el-table-column>
        <el-table-column
          prop="idlePrice"
          label="价格(元)"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="user.nickname"
          label="发布用户"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="pictureList"
          label="商品图片"
          width="120"
        >
          <template slot-scope="scope">
            <el-image 
                style="width: 80px; height: 80px"
                :src="scope.row.pictureList[0]"
                :preview-src-list="scope.row.pictureList"
                fit="cover"
                ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="220"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="approveGoods(scope.row.id)"
            >通过审核</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="rejectGoods(scope.row.id)"
            >拒绝</el-button>
            <el-button
              size="mini"
              @click="showDetail(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 已审核商品表格 -->
      <el-table 
        v-if="mode == 2"
        :data="reviewedGoods"
        stripe
        style="width: 100%; color: #5a5c61;"
        v-loading="loading"
      >
        <el-table-column
          prop="releaseTime"
          label="审核时间"
          width="180"
        >
            <template slot-scope="scope">
        {{ scope.row.releaseTime | formatDate }}
    </template>
      </el-table-column>
        <el-table-column
          prop="idleName"
          label="商品名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          label="审核状态"
          width="120"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 4 ? 'danger' : 'success'">
              {{ scope.row.status === 1 ? '已拒绝' : '已通过' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="reviewComment"
          label="审核意见"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="reviewer"
          label="审核人"
          width="120"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="showDetail(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="pageSize"
          background
          layout="prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
  
      <!-- 拒绝原因对话框 -->
      <el-dialog
        title="拒绝原因"
        :visible.sync="rejectDialogVisible"
        width="30%"
      >
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入拒绝原因"
          v-model="rejectReason"
        ></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="rejectDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="rejectGoods">确 定</el-button>
        </span>
      </el-dialog>
  
      <!-- 商品详情对话框 -->
<el-dialog
  :title="currentGoods.idleName"
  :visible.sync="detailDialogVisible"
  width="60%"
>
  <div class="goods-detail">
    <div class="goods-images">
      
      <el-image 
        style="width: 300px; height: 300px"
        :src="currentGoods.pictureList && currentGoods.pictureList[0]"
        :preview-src-list="currentGoods.pictureList || []"
        fit="cover"
      ></el-image>
    </div>
    <div class="goods-info">
      <p><strong>商品名称：</strong>{{ currentGoods.idleName }}</p>
      <p><strong>商品分类：</strong>{{ getCategoryName(currentGoods.idleLabelDetails) }}</p>
      <p><strong>商品价格：</strong>{{ currentGoods.idlePrice }}元</p>
      <p><strong>商品成色：</strong>{{ currentGoods.idleCondition }}</p>
      <p><strong>商品描述：</strong>{{ currentGoods.idleDetails }}</p>
      <div class="goods-description">{{ currentGoods.idleDetails }}</div>
    </div>
  </div>
</el-dialog>
    </div>
  </template>
  
  <script>
  import dayjs from 'dayjs';
  export default {
    name: "ExamineGoods",
    data() {
      return {
        mode: 1, // 1-待审核 2-已审核
        nowPage: 1,
        pageSize: 8,
        total: 0,
        loading: false,
        pendingGoods: [],
        reviewedGoods: [],
        detailDialogVisible: false,
        currentGoods: {}
      };
    },
    created() {
      this.getPendingGoods();
    },
    methods: {
        // 获取分类名称
  getCategoryName(categoryCode) {
    const categoryMap = {
       // 数码分类
    '101': '手机',
    '102': '平板电脑',
    '103': '笔记本电脑',
    '104': '相机',
    '105': '数码配件',
    '106': '智能设备',
    '107': '办公设备',
    '108': '网络设备',
    '109': '影音数码',

    // 服饰分类
    '201': '女装',
    '202': '女鞋',
    '203': '男装',
    '204': '男鞋',
    '205': '箱包手表',
    '206': '配件',
    '207': '运动服饰',
    '208': '首饰',

    // 技能分类
    '301': '定制设计',
    '302': '技能学习',
    '303': '餐饮美食',

    // 服务分类
    '401': '跑腿服务',
    '402': '上门回收',

    // 美妆分类
    '501': '彩妆',
    '502': '护肤',
    '503': '香水',

    // 玩具分类
    '601': '玩具',
    '602': '手办',

    // 食品分类
    '701': '粮油米面',
    '702': '酒水',
    '703': '休闲食品',
    '704': '饮料',
    '705': '水果',
    '706': '茶',

    // 图书分类
    '801': '图书期刊',
    '802': '文化用品',
    '803': '游戏类',
    '804': '游戏交易',
    '805': '音像CD',

    // 其他分类
    '901': '其他 - 其他用品'
    };
    
    return categoryMap[categoryCode] || '未知分类';
  },
      // 获取待审核商品
      getPendingGoods() {
  this.loading = true;
  this.$api.getGoods({
    status:4,
    page: this.nowPage,
    nums: this.pageSize
  }).then(res => {
    console.log('获取待审核商品:',res);
    if (res.status_code === 1) {
      // 解析 pictureList
      this.pendingGoods = res.data.list.map(item => {
        item.releaseTime=dayjs(item.releaseTime).format('YYYY-MM-DD HH:mm:ss');
        return {
          ...item,
          pictureList: JSON.parse(item.pictureList)
        }
      });
      this.total = res.data.count;
    } else {
      this.$message.error(res.msg);
    }
  }).catch(e => {
    console.error(e);
    this.$message.error("获取待审核商品失败");
  }).finally(() => {
    this.loading = false;
  });
},
      
      // 获取已审核商品
      getReviewedGoods() {
        this.loading = true;
        this.$api.getGoods({
          status:1,
          page: this.nowPage,
          nums: this.pageSize
        }).then(res => {
          if (res.status_code === 1) {
            
            this.reviewedGoods = res.data.list;
            console.log('获取的商品为:',this.reviewedGoods);
            this.total = res.data.count;
          } else if(res.status_code === 5){
            this.$message.error(res.msg);
          }
        }).catch(e => {
          console.error(e);
          this.$message.error("获取已审核商品失败");
        }).finally(() => {
          this.loading = false;
        });
      },
      
      // 切换tab
      handleSelect(val) {
        if (this.mode !== val) {
          this.mode = val;
          this.nowPage = 1;
          if (val == 1) {
            this.getPendingGoods();
          } else {
            this.getReviewedGoods();
          }
        }
      },
      
      // 分页变化
      handleCurrentChange(val) {
        this.nowPage = val;
        if (this.mode == 1) {
          this.getPendingGoods();
        } else {
          this.getReviewedGoods();
        }
      },
      
      // 通过审核
      approveGoods(id) {
        this.$confirm("确定要通过该商品的审核吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$api.updateIdleItem({
            id: id,
            idleStatus: 1 // 假设1是通过审核状态
          }).then(res => {
            if (res.status_code === 1) {
              this.$message.success("审核通过");
              this.getPendingGoods();
            } else {
              this.$message.error(res.msg);
            }
          }).catch(e => {
            console.error(e);
            this.$message.error("操作失败");
          });
        }).catch(() => {});
      },
      

      
     // 拒绝商品
rejectGoods(id) {
  this.$confirm('确定要拒绝该商品吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户点击确定后执行
    this.$api.updateIdleItem({
      id: id,
      idleStatus: 5, // 假设5是拒绝状态
    }).then(res => {
      if (res.status_code === 1) {
        this.$message.success("已拒绝该商品");
        this.getPendingGoods();
      } else {
        this.$message.error(res.msg);
      }
    }).catch(e => {
      console.error(e);
      this.$message.error("操作失败");
    });
  }).catch(() => {
    // 用户点击取消
    this.$message.info('已取消操作');
  });
},
      
      // 显示商品详情
      showDetail(goods) {
  // 确保pictureList是数组格式
  this.currentGoods = {
    ...goods,
    pictureList: Array.isArray(goods.pictureList) 
      ? goods.pictureList 
      : JSON.parse(goods.pictureList || '[]')
  };
  this.detailDialogVisible = true;
}
    }
  };
  </script>
  
  <style scoped>
  .main-border {
    background-color: #FFF;
    padding: 10px 30px;
    box-shadow: 0 1px 15px -6px rgba(0,0,0,.5);
    border-radius: 5px;
  }
  
  .block {
    display: flex;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 10px;
    width: 100%;
  }
  
  .goods-detail {
    display: flex;
  }
  
  .goods-images {
    flex: 0 0 300px;
    margin-right: 20px;
  }
  
  .goods-info {
    flex: 1;
  }
  
  .goods-info p {
    margin: 10px 0;
    line-height: 1.5;
  }
  
  .goods-description {
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    line-height: 1.6;
  }
  </style>